<style lang="less">
    @import "loan-taskpool-wait.less";
    @import "../loan-approve-task/style/row-background.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row class="operation">
                        <Button @click="setCancel" type="primary">批量取消</Button>
                    </Row>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
                            <Form-item label="申请编号" prop="applyNo">
                                <Input type="text" v-model="searchForm.applyNo" clearable placeholder="请输入申请编号" style="width: 200px"/>
                            </Form-item>
                            <Form-item label="客户姓名" prop="custName">
                                <Input type="text" v-model="searchForm.custName" clearable placeholder="请输入客户姓名" style="width: 200px"/>
                            </Form-item>
                            <span v-if="drop">
                                 <Form-item label="合作商名称" prop="dealerName">
                                    <Input v-model="searchForm.dealerName" type="text" placeholder="请输入合作商名称" style="width:200px"/>
                                 </Form-item>
                                <!--                            <Form-item label="放款模式" prop="lendingMode">-->
                                <!--                                <Select v-model="searchForm.lendingMode" style="width:200px" clearable placeholder="请选择放款模式">-->
                                <!--                                    <Option v-for="item in lendingModeList" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>-->
                                <!--                                </Select>-->
                                <!--                            </Form-item>-->
                                <Form-item label="车辆属性" prop="carNature">
                                    <Select v-model="searchForm.carNature" style="width:200px" clearable placeholder="请选择车辆属性">
                                        <Option v-for="item in  carNatureList" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="车辆类型" prop="carType">
                                    <Select v-model="searchForm.carType" style="width:200px" clearable placeholder="请选择车辆类型">
                                        <Option v-for="item in carTypeList" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="业务类型" prop="businessType">
                                    <Select v-model="searchForm.businessType" style="width:200px" clearable placeholder="请选择申请类型">
                                        <Option v-for="item in businessTypeList" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="渠道类型" prop="channelType">
                                    <Select v-model="searchForm.channelType" clearable placeholder="请选择渠道类型" style="width:200px">
                                        <Option v-for="item in this.channelTypeList" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="案件审批时间">
                                    <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd" clearable
                                                @on-change="selectDateRange" placeholder="选择案件审批时间"
                                                style="width: 200px"></DatePicker>
                                </Form-item>
                                <Form-item label="案件标记" prop="caseLabel">
                                    <Select v-model="searchForm.caseLabel" filterable clearable placeholder="请选择案件标记" style="width:200px;">
                                        <Option v-for="item in this.confCaseLabelList" :label="item.labelName" :value="item.id" :key="item.value">{{item.labelName}}</Option>
                                    </Select>                                  </Form-item>
                            </span>
                            <Form-item style="margin-left: -35px;" v-if="dropDownContent=='展开'">
                                <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                            <Form-item style="margin-left: -65px;width:100%;text-align: center;" v-if="dropDownContent=='收起'">
                                <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row>
                        <Table v-bind:loading="loading"
                               border
                               v-bind:columns="columns"
                               v-bind:data="data"
                               sortable="custom"
                               @on-sort-change="changeSort"
                               @on-selection-change="showSelect"
                               ref="table">
                            <template slot-scope="{row,index}" slot="action">
                                <Button style="margin-right:5px" type="primary" size="small" @click="showLogs(row)">查看日志</Button>
                            </template>
                            <template slot-scope="{row , index}" slot="businessType">
                                <span>{{setBusinessTypeTitle(row.businessType)}}</span>
                            </template>
                            <template slot-scope="{row , index}" slot="lendingMode">
                                <span>{{setLendingModeTitle(row.lendingMode)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="tags">
                                <Tag v-for="item in row.labelList" :color="item.labelColor" >{{item.labelName}}</Tag>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer>
                        </Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <approve-record v-model="recordVisible" ref="approveRecord" :applyNo="applyNoParam" />
    </div>
</template>

<script>
    import { getByTypes } from "_p/basic/api/admin/datadic";
    import { getWaitSubmitTaskList,modifyCancle } from '@/projects/afs-core-business/api/afs-case/taskpool-wait/loan-taskpool-waitSubmit';
    import approveRecord from '../approve-record/approve-record'
    import { getLabelList } from '@/projects/afs-core-business/api/afs-case/loan-approve/loanApproveTask'
    import { getConfCaseLabelList } from '@/projects/afs-core-business/api/afs-case/loan-approve/loanApproveTask'
    export default {
        name: "loan-taskpool-waitSubmit",
        components:{
            approveRecord
        },
        data(){
            return {
                //获取标签
                confCaseLabelList:[],
                loading:false,
                recordVisible:false,
                interval: null,
                drop: false,
                dropDownContent: "展开",
                dropDownIcon:"ios-arrow-down",
                labelList: [],
                secondsAgo: 0,
                selectCount: 0,
                selectList: [],
                dataDic: {},
                selectDate: null,
                applyNoParam: '',
                businessTypeList:[],
                applyStatusList:[],
                channelTypeList:[],
                lendingModeList:[],
                carNatureList:[],
                carTypeList:[],
                dicKeysList:[],
                searchForm:{
                    pageSize: 10,
                    pageNumber: 1,
                    startDate: null,
                    endDate: null,
                    applyNo: '',
                    carType: '',
                    carNature: '',
                    channelType: '',
                    custName: '',
                    dealerName: '',
                    businessType: ''
                },
                dicKeys: [
                    'businessType',
                    'channelBelong',
                    'lendingMode',
                    'carNature',
                    'carType'
                ],
                columns: [
                    {
                        type: 'selection',
                        minWidth: 60,
                        maxWidth: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        minWidth: 160,
                        align: 'center',
                        fixed: 'left',
                        slot: 'action'
                    },
                    {
                        title: '申请编号',
                        key: 'applyNo',
                        align: 'center',
                        minWidth: 165,
                    },
                    {
                        title: '客户姓名',
                        key: 'custNameRepeat',
                        align: 'center',
                        minWidth: 165,
                        tooltip: true //显示提示
                    },
                    {
                        title: '合作商名称',
                        key: 'dealerName',
                        align: 'center',
                        minWidth: 180
                    },
                    {
                        title: '案件标记',
                        key: 'tags',
                        align: 'center',
                        minWidth: 280,
                        slot: "tags"
                    },
                    {
                        title: '业务类型',
                        key: 'businessType',
                        align: 'center',
                        minWidth: 100,
                        slot:"businessType"
                    },
                    {
                        title: '审批提报时间',
                        align: 'center',
                        key: 'passFirstDate',
                        minWidth: 150
                    },
                    {
                        title: '审批通过时间',
                        align: 'center',
                        key: 'passLastDate',
                        minWidth: 150
                    },
                ],
                data:[],
                total:0
            }
        },
        mounted(){
          this.init();
        },
        methods:{
            init() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTaskList();
                this.initDataDic();
                this.getLabelList()
                this.getConfCaseLabelList()
            },
            initDataDic(){
                let self = this;
                getByTypes(this.dicKeys).then(res => {
                    if (res.code === '0000' && res.data) {
                        self.dataDic = res.data
                        this.businessTypeList.push(...res.data.businessType)
                        this.channelTypeList.push(...res.data.channelBelong)
                        this.lendingModeList.push(...res.data.lendingMode)
                        this.carNatureList.push(...res.data.carNature)
                        this.carTypeList.push(...res.data.carType)
                    }
                })
            },
            getLabelList(){
                getLabelList().then(res=>{
                    this.labelList = res.data;
                    console.log(res.data)
                })
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getTaskList();
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.startDate = v[0];
                    this.searchForm.endDate = v[1];
                }
            },
            changePage(v) {
                this.searchForm.pageNumber = v
                this.getTaskList()
                this.clearSelectAll()
            },
            changePageSize(v) {
                this.searchForm.pageSize = v
                this.getTaskList()
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false)
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTaskList();
            },
            setApplyStatusTitle(val) {
                let dic = {}
                this.applyStatusList.forEach(colunm => {
                    if (colunm.value === val) {
                        dic = colunm
                    }
                })
                return dic.title
            },
            setBusinessTypeTitle(val) {
                let dic = {}
                this.businessTypeList.forEach(colunm => {
                    if (colunm.value === val) {
                        dic = colunm
                    }
                })
                return dic.title
            },
            setLendingModeTitle(val) {
                let dic = {}
                this.lendingModeList.forEach(colunm => {
                    if (colunm.value === val) {
                        dic = colunm
                    }
                })
                return dic.title
            },
            hasSelected() {
                if (this.selectCount == 0) {
                    this.$Message.warning('需先勾选数据行!')
                    return false
                } else {
                    return true
                }
            },
            setCancel(){
                if (this.hasSelected()) {
                    this.loading = true
                    let data = []
                    this.selectList.forEach(function(e) {
                        data += e.applyNo + ','
                    })
                    modifyCancle(
                        data
                    ).then(res => {
                        if (res.code == '0000') {
                            this.$Message.success('操作成功')
                            this.getTaskList()
                        }
                    })
                    this.loading = false
                }
            },
            getTaskList(){
                this.loading = true
                getWaitSubmitTaskList(this.searchForm).then(res => {
                    this.loading = false
                    if (res.code === '0000') {
                        this.data = res.data.records
                        console.log(res.data.records)
                        this.total = res.data.total
                    }
                    if(this.total > 0) {
                        this.startAddSeconds();
                    }
                })
                this.selectCount=0;
            },
            startAddSeconds() {
                if (this.interval) {
                    clearInterval(this.interval);
                }
                this.secondsAgo = 0;
                let _this = this;
                this.interval = setInterval(() => {
                    _this.secondsAgo++;
                }, 1000);
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm = {
                    applyNo:"",
                    custName:"",
                    caseLabel:"",
                    dealerName:"",
                    businessStateIn:"",
                    carNature:"",
                    carType:"",
                    operateWay:"",
                    affiliatedWay:"",
                    lendingMode:"",
                    lendingFirstStartDate: "",
                    lendingFirstEndDate: "",
                    pageNumber: 1,
                    pageSize: 10
                }
                // 重新加载数据
                this.getTaskList();
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "展开";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            showLogs(v) {
                this.applyNoParam = v.applyNo
                this.recordVisible = true
            },

            getConfCaseLabelList() {
                console.log("00000")
                getConfCaseLabelList().then(res => {
                    if (res.code === '0000') {
                        this.confCaseLabelList = res.data
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
